<template>
  <div class="productList">
    <div class="aboutBanner">
      <img src="../assets/images/productBanner.jpg" alt="">
    </div>
    <div class="aboutMenu">
      <div class="productTop">
        <ul class="w-1100 productMenu clear">
          <li v-for="(item,index) in tabs" :class="{active:index == num}" @click="tab(index)" :key="item.index">
            {{ item }}
            <span></span>
          </li>
        </ul>
        <div class="tabCon">
          <div class="crumbs w-1100">
            <ul class="productClassify clear" v-for="(itemCon,index) in classify" v-show=" index == num" :key="itemCon.index">
              <li v-for="(productName, index) in itemCon" :key="productName.itemCon" @click="tab1(index)" :class="{active:index == num1}">
                <i>{{ productName }}</i>
              </li>
            </ul>
          </div>
          <div class="tabBox" v-show=" 0 == num">
            <ul class="w-1100 itemCon clear" v-show=" 0 == num1">
              <li><img src="../assets/images/producta.jpg" alt=""></li>
              <li><img src="../assets/images/productb.jpg" alt=""></li>
            </ul>
            <ul class="w-1100 itemCon clear" v-show=" 1 == num1">
              <li><img src="../assets/images/productb.jpg" alt=""></li>
            </ul>
            <ul class="w-1100 itemCon clear" v-show=" 2 == num1">
              <li><img src="../assets/images/producta.jpg" alt=""></li>
            </ul>
          </div>
          <div class="tabBox" v-show=" 1 == num">
            <ul class="w-1100 clear" v-show=" 0 == num1">
              <li>
                <p class="xian"></p>
                <p class="productBox">
                  缴纳管家年费用的政企/家庭用户可享有免费的12次/年（每次2小时）的保洁服务、免费的网络使用及维护、免费的家电维修及免费的水电维修服务。
                </p>
              </li>
            </ul>
            <ul class="w-1100 itemBox clear" v-show=" 1 == num1">
              <li>
                <div class="productImg">
                  <img src="../assets/images/product.jpg" alt="">
                  <p></p>
                </div>
                <p>未来家保姆服务</p>
              </li>
              <li>
                <div class="productImg">
                  <img src="../assets/images/product1.jpg" alt="">
                  <p></p>
                </div>
                <p>未来家家电维修</p>
              </li>
              <li>
                <div class="productImg">
                  <img src="../assets/images/product2.jpg" alt="">
                  <p></p>
                </div>
                <p>未来家水电维修</p>
              </li>
              <li>
                <div class="productImg">
                  <img src="../assets/images/product3.jpg" alt="">
                  <p></p>
                </div>
                <p>未来家网络维护</p>
              </li>
              <li>
                <div class="productImg">
                  <img src="../assets/images/product4.jpg" alt="">
                  <p></p>
                </div>
                <p>未来家智能家居</p>
              </li>
              <li>
                <div class="productImg">
                  <img src="../assets/images/product5.jpg" alt="">
                  <p></p>
                </div>
                <p>智能家居集成系统</p>
              </li>
              <li>
                <div class="productImg">
                  <img src="../assets/images/product6.jpg" alt="">
                  <p></p>
                </div>
                <p>未来家安防产品</p>
              </li>
              <li>
                <div class="productImg">
                  <img src="../assets/images/product7.jpg" alt="">
                  <p></p>
                </div>
                <p>未来家绿植家</p>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

export default {
  data () {
    return {
      tabs: [' 未来家产品 ', ' 未来家服务项目 '],
      num: 0,
      num1: 0,
      classify: [
        [
          ' 未来家.智能家管家服务  智能家居 ', ' 未来家.安防家 ', ' 未来家.绿植家 '
        ],
        [
          ' 未来家管家服务 ', ' 未来家保洁服务 '
        ]
      ]
    }
  },
  methods: {
    tab (index) {
      this.num = index
      this.num1 = 0
    },
    tab1 (index) {
      this.num1 = index
    }
  }
}
</script>

<style lang="scss">
@import "../assets/style/product/Product.scss";
//面包屑样式
@import "@/assets/style/special.scss";
</style>
